<div class="container illust">
  {{ if !Illust.IsUgoira }}
  <div class="illust-images">
    {{ range index := Illust.Images }}
    <a href="{{ .Original }}" target="_blank">
      <img src="{{ .Large }}" alt="Page {{ index }}" />
    </a>
    {{ end }}
  </div>
  {{ else }}
  <div class="illust-images">
      <video
        autoplay
        loop
        muted
        disablepictureinpicture
        playsinline
        controls
        poster="{{ Illust.Images[0].Large }}"
        src="/proxy/ugoira.com/{{ Illust.ID }}"
      >
        Unable to load ugoira.
      </video>
  </div>
  <a href="/proxy/ugoira.com/{{ Illust.ID }}"
    >Download</a
  >
  <br />
  <a href="https://ugoira.com/i/{{ Illust.ID }}"
    >Go to ugoira.com for more options</a
  >
  {{ end }}

  <div class="illust-attr">
    <a href="/users/{{ Illust.User.ID }}"
      ><img
        src="{{ Illust.User.Avatar }}"
        alt="{{ Illust.User.Name }}"
        class="illust-avatar"
      />
    </a>
    <div class="attr-wrap">
      <div class="illust-title">{{ Illust.Title }}</div>
      <div class="illust-author">
        <a href="/users/{{ Illust.User.ID }}">{{ Illust.User.Name }}</a>
      </div>
    </div>
  </div>

  <div>
    <a href="https://pixiv.net/i/{{ Illust.ID }}"
      >pixiv.net/i/{{ Illust.ID }}</a
    >
    <br />
  </div>
  <div class="illust-tags">
    <!--
         To know if this artwork is bookmarked:
         ```
         {{ if Illust.Bookmarked }}
          <button>Unbookmark</button>
          //...
         {{ else }}
          <button>Bookmarked</button>
          //...
         {{ end }}
         ```

         Same with Illust.Liked
    -->
    <span class="illust-tag-attr">
      <img src="/assets/eye.png" alt="Views" />
      {{ Illust.Views }}
    </span>
    <span class="illust-tag-attr">
      <img src="/assets/heart-solid.png" alt="Bookmarks" />
      {{ Illust.Bookmarks }}
    </span>
    <span class="illust-tag-attr">
      <img src="/assets/like.png" alt="Likes" />
      {{ Illust.Likes }}
    </span>
    <span class="illust-tag-attr">
      <img src="/assets/calendar.png" alt="Date" />
      {{ parseTime: Illust.Date }}
    </span>
  </div>

  <div class="illust-tags">
    {{ if Illust.AiType == 2 }}
    <span class="illust-tag">
      <span class="illust-tag-name" id="highlight">AI-generated</span>
    </span>
    {{ end }} {{ range Illust.Tags }} {{ if isEmphasize(.Name) }}
    <span class="illust-tag">
      <span class="illust-tag-name" id="highlight">{{ .Name }}</span>
    </span>
    {{ else }}
    <span class="illust-tag">
      <span class="illust-tag-name"
        ><a href="/tags/{{ escapeString(.Name) }}">#{{ .Name }}</a></span
      ><span class="illust-tag-translation">{{ .TranslatedName }}</span>
    </span>
    {{ end }} {{ end }}
  </div>
  <br />
  <div class="illust-description">
    {{ raw: parsePixivRedirect(Illust.Description) }}
  </div>
  <br />
  <div class="illust-other-works">
    <a href="/users/{{ Illust.User.ID }}"
      ><img src="{{ Illust.User.Avatar }}" alt="{{ Illust.User.Name }}" /> Other
      works by {{ Illust.User.Name }}
      <span class="special-symbol">&raquo;</span>
    </a>
    <div class="artwork-container-scroll">
      {{ range Illust.RecentWorks }}
      <div class="artwork-small artwork">
        {{ include "components/thumbnail-dt" . }}
      </div>
      {{ end }}
    </div>
  </div>
  <hr />
  <h2>Comments</h2>
  {{ if Illust.CommentDisabled == 1 }}
  <p>The creator turned comments off</p>
  {{ else if Illust.Comments == 0 }}
  <p>There are no comments yet</p>
  {{ else }} {{ range Illust.CommentsList }}
  <div class="comment">
    <img class="comment-avatar" src="{{ .Avatar }}" alt="{{ .AuthorName }}" />
    <div class="comment-context">
      <b>{{ .AuthorName }}</b>
      <p>
        {{ if .Stamp }}
        <img
          class="stamp"
          src="/proxy/s.pximg.net/common/images/stamp/generated-stamps/{{ .Stamp }}_s.jpg"
          alt="/proxy/s.pximg.net/common/images/stamp/generated-stamps/{{ .Stamp }}_s.jpg"
        />
        {{ else }} {{ raw: parseEmojis(.Context) }} {{ end }}
      </p>

      <small>{{ .Date }}</small>
    </div>
  </div>
  {{ end }} {{ end }}
</div>
<div class="container">
  <h2>Related works</h2>
  <div class="artwork-container">
    {{ include "components/small-tn" Illust.RelatedWorks }}
  </div>
</div>
